<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>圆角</title>
<style>
div {
	width:500px;
	height:50px;
	background:#69F;
	margin:10px;
	float:left;
	padding:10px;
	border:2px solid;
}
#radius1 {
	border-radius: 15px;
}
#radius2 {
	border-bottom-right-radius: 15px;
}
#radius3 {
	border-bottom-left-radius: 15px;
}
#radius4 {
	border-top-right-radius: 15px;
}
#radius5 {
	border-top-left-radius: 15px;
}
#radius6 {
	border-right-bottom-radius: 15px;
}
#radius7 {
	border-right-radius: 15px;
}
#radius8 {
	border-radius: 50%;
	width:200px;
	height:200px;
	text-align:center;
	line-height:200px;
}
#radius9 {
	border-radius: 0 50px 50px 0;
}
#radius10 {
	border: groove 1em red;
    border-radius: 2em;
	height:70px;
}
#radius11 {
	border: ridge 15px;
	border-radius: 13em/3em;
	text-align:center;
	height:70px;
}
#radius12 {
	border-top-radius: 15px;
}
#radius13 {
	border-bottom-radius: 15px;
}
.note {
	clear:both;
	margin-top:20px;
}
.test {
	background: #FF9;
	border-radius: 15px;
	padding:3px;
	line-height:25px;
}
</style>
</head>

<body>
<div id="radius1">
	border-radius: 10px;
</div>
<p class="note">书写规范：先上下，后左右，反之无效</p>
<div id="radius2">
    border-bottom-right-radius: 15px;
</div>
<div id="radius3">
    border-bottom-left-radius: 15px;
</div>
<div id="radius4">
    border-top-right-radius: 15px;
</div>
<div id="radius5">
    border-top-left-radius: 15px;
</div>
<div id="radius6">
    border-right-bottom-radius: 15px; /*无效的写法*/
</div>
<div id="radius7">
    border-right-radius: 10px; /*无效的写法*/
</div>
<div>
	<span class="test">
        如果给 inline 元素添加圆角，就要小心折行的问题：<br/>
        border-radius: 15px;
    </span>
</div>
<div id="radius8">
	border-radius: 50%;
</div>
<div id="radius9">
	border-radius: 0 50px 50px 0;
</div>
<div id="radius10">
	border: groove 1em red;<br/>
    border-radius: 2em;
</div>
<div id="radius11">
	border: ridge 15px;<br/>
	border-radius: 13em/3em;
</div>
<div id="radius12">
	border-top-radius: 15px; /*无效的写法*/
</div>
<div id="radius13">
	border-bottom-radius: 15px; /*无效的写法*/
</div>
<span></span>
<ul style="clear:both;">
	<li>测试的浏览器：</li>
    <li>IE9, Firefox4, Safari5, Chrome11, Opera11</li>
    <li>Safari5不支持百分比圆角。 Opera 11 对百分比圆角的解析方式与其他浏览器有差异。</li>
</ul>
</body>
</html>
